import { ISchema } from '@formily/react'
import {
  ReactionsSetter,
  DataSourceSetter,
  ValidatorSetter,
} from '@designable/formily-setters'
import { FormItemSwitcher } from '../common/FormItemSwitcher'

export const Dialog: ISchema = {
  type: 'object',
  properties: {
    'field-group': {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        name: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
        title: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'Input',
          'x-reactions': {
            fulfill: {
              state: {
                hidden: '{{$form.values["x-decorator"] !== "FormItem"}}',
              },
            },
          },
        },
        description: {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': 'Input.TextArea',
          'x-reactions': {
            fulfill: {
              state: {
                hidden: '{{$form.values["x-decorator"] !== "FormItem"}}',
              },
            },
          },
        },
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden', 'none', ''],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-pattern': {
          type: 'string',
          enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'editable',
          },
        },
        'x-reactions': {
          'x-decorator': 'FormItem',
          'x-component': ReactionsSetter,
        },
        'x-decorator': {
          type: 'string',
          'x-decorator': 'FormItem',
          'x-component': FormItemSwitcher,
        },
      },
    },
    'component-group': {
      type: 'void',
      'x-component': 'CollapseItem',
      'x-reactions': {
        fulfill: {
          state: {
            visible: '{{!!$form.values["x-component"]}}',
          },
        },
      },
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            dialogName: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
              required: true,
            },
            title: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
              required: true,
            },
            width: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
            },
            confirm: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ExpressionDialogSetter',
            },
            cancel: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ExpressionDialogSetter',
            },
          },
        },
      },
    },
    'layout-group': {
      type: 'void',
      'x-component': 'CollapseItem',
      'x-component-props': {
        header: '布局设置',
      },
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            centered: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: false,
              },
            },
            closable: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
            },
            maskClosable: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
            },
            keyboard: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
            },
            zIndex: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
            },
          },
        },
      },
    },
    'behavior-group': {
      type: 'void',
      'x-component': 'CollapseItem',
      'x-component-props': {
        header: '行为设置',
      },
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            destroyOnClose: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
            },
            forceRender: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: false,
              },
            },
          },
        },
      },
    },
    'style-group': {
      type: 'void',
      'x-component': 'CollapseItem',
      'x-component-props': {
        header: '样式设置',
      },
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            mask: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
            },
            maskStyle: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'CSSStyle',
            },
            bodyStyle: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'CSSStyle',
            },
            wrapClassName: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
            },
            className: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
            },
            style: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'CSSStyle',
            },
          },
        },
      },
    },
    'footer-group': {
      type: 'void',
      'x-component': 'CollapseItem',
      'x-component-props': {
        header: '底部设置',
      },
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            showFooter: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Switch',
              'x-component-props': {
                defaultChecked: true,
              },
            },

            okText: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
              'x-component-props': {
                placeholder: '确定',
              },
              'x-reactions': {
                fulfill: {
                  state: {
                    visible:
                      '{{$form.values["x-component-props"].showFooter !== false}}',
                  },
                },
              },
            },
            cancelText: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
              'x-component-props': {
                placeholder: '取消',
              },
              'x-reactions': {
                fulfill: {
                  state: {
                    visible:
                      '{{$form.values["x-component-props"].showFooter !== false}}',
                  },
                },
              },
            },
            okType: {
              type: 'string',
              enum: ['primary', 'ghost', 'dashed', 'link', 'text', 'default'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'primary',
              },
              'x-reactions': {
                fulfill: {
                  state: {
                    visible:
                      '{{$form.values["x-component-props"].showFooter !== false}}',
                  },
                },
              },
            },
            okButtonProps: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'CSSStyle',
              'x-reactions': {
                fulfill: {
                  state: {
                    visible:
                      '{{$form.values["x-component-props"].showFooter !== false}}',
                  },
                },
              },
            },
            cancelButtonProps: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'CSSStyle',
              'x-reactions': {
                fulfill: {
                  state: {
                    visible:
                      '{{$form.values["x-component-props"].showFooter !== false}}',
                  },
                },
              },
            },
          },
        },
      },
    },
  },
}

/**
 * Dialog Schema 配置说明
 *
 * 本schema基于antd Modal组件配置，包含以下主要配置组：
 *
 * 1. component-group: 组件属性
 *    - dialogName: 弹窗名称（用于注册）
 *    - title: 弹窗标题
 *    - width: 弹窗宽度
 *    - confirm: 确认按钮表达式
 *    - cancel: 取消按钮表达式
 *
 * 2. layout-group: 布局设置
 *    - centered: 垂直居中
 *    - closable: 显示关闭按钮
 *    - maskClosable: 点击蒙层关闭
 *    - keyboard: 支持键盘ESC关闭
 *    - zIndex: 层级
 *
 * 3. behavior-group: 行为设置
 *    - destroyOnClose: 关闭时销毁子元素
 *    - forceRender: 强制渲染
 *
 * 4. style-group: 样式设置
 *    - mask: 显示蒙层
 *    - maskStyle: 蒙层样式
 *    - bodyStyle: 内容区域样式
 *    - wrapClassName: 外层容器类名
 *    - className: 类名
 *    - style: 样式
 *
 * 5. footer-group: 底部设置
 *    - showFooter: 是否显示底部内容
 *    - okText: 确定按钮文字
 *    - cancelText: 取消按钮文字
 *    - okType: 确定按钮类型
 *    - okButtonProps: 确定按钮属性
 *    - cancelButtonProps: 取消按钮属性
 *
 * 所有配置项都通过Formily的Schema系统进行管理，支持动态配置和响应式更新。
 */
